<template>
  <div class="gongsi-mes">
    <div class="header">公司信息设置</div>
    <el-form
      :model="message"
      :rules="rules"
      ref="message"
      label-width="100px"
      class="messageFrom"
    >
      <el-form-item label="公司名称:" prop="name">
        <el-input v-model="message.name"></el-input>
      </el-form-item>
      <el-form-item label="公司地址:" prop="address">
        <el-input v-model="message.address"></el-input>
      </el-form-item>
      <el-form-item label="员工数:" prop="employees">
        <el-input v-model="message.employees"></el-input>
      </el-form-item>
      <el-form-item label="负责人:" prop="principal">
        <el-input v-model="message.principal"></el-input>
      </el-form-item>
      <el-form-item label="身份证号:" prop="idCard">
        <el-input v-model="message.idCard"></el-input>
      </el-form-item>
      <el-form-item label="联系电话:" prop="phone">
        <el-input v-model="message.phone"></el-input>
      </el-form-item>
      <el-form-item label="公司邮箱:" prop="email">
        <el-input v-model="message.email"></el-input>
      </el-form-item>
      <el-form-item label="微信:" prop="weChat">
        <el-input v-model="message.weChat"></el-input>
      </el-form-item>
      <el-form-item label="公司LOGO:" prop="logo">
        <el-upload
          v-model="message.loge"
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple
        >
          <i class="el-icon-upload icon-image"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            只能上传jpg/png文件,且不超过500kb
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="备注:" prop="remark">
        <el-input v-model="message.remark" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="公司图册:" prop="image">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          v-model="image"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(message)">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


    <script>
export default {
  data() {
    let phone = (rule, value, callback) => {
      if (/^[1][3,4,5,7,8][0-9]{9}$/.test(value)) {
        return callback();
      }
      callback(new Error("请输入13,14,15,17,18开头的手机号"));
    };
    let shenfenzheng = (rule, value, callback) => {
      if (/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
        return callback();
      }
      callback(new Error("请输入正确的十五或十八位身份证"));
    };
    let em = (rule, value, callback) => {
      if (/^\w+([-+.]\w+)\*@\w+([-.]\w+)\*\.\w+([-.]\w+)\*$/.test(value)) {
        return callback();
      }
      callback(new Error("请输入正确的email地址"));
    };
    let url = (rule, value, callback) => {
      if (/^[\u2E80-\u9FFF]+$/.test(value)) {
        return callback();
      }
      callback(new Error("只能输入汉字"));
    };
    let na = (rule, value, callback) => {
      if (/^[\u2E80-\u9FFF]+$/.test(value)) {
        return callback();
      }
      callback(new Error("只能输入汉字"));
    };
    let headname = (rule, value, callback) => {
      if (/^[\u2E80-\u9FFF]+$/.test(value)) {
        return callback();
      }
      callback(new Error("只能输入汉字"));
    };
    return {
      message: {
        name: "",
        address: "",
        employees: "",
        principal: "",
        idCard: "",
        phone: "",
        email: "",
        weChat: "",
        logo: "",
        remark: "",
        image: "",
      },
      dialogImageUrl: "",
      dialogVisible: false,
      text: "",
      rules: {
        name: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
          { validator: na, trigger: "blur" },
        ],
        address: [
          { required: true, message: "请输入公司地址", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
          { validator: url, trigger: "blur" },
        ],
        employees: [
          { required: true, message: "请输入员工人数", trigger: "blur" },
          { min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "blur" },
        ],
        principal: [
          { required: true, message: "请输入负责人名字", trigger: "blur" },
          { min: 2, max: 4, message: "长度在 2 到 4 个字符", trigger: "blur" },
          { validator: headname, trigger: "blur" },
        ],
        idCard: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          { validator: shenfenzheng, trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          { validator: em, trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { validator: phone, trigger: "blur" },
        ],
        weChat: [
          { required: true, message: "请输入微信", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        logo: [{ required: true, message: "请上传公司logo", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(message) {
      this.$refs[message].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>


<style lang="scss" scoped>
.gongsi-mes {
  border: 2px solid #bebebe;
  border-radius: 5px;

  & .header {
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding-left: 30px;
    box-sizing: border-box;
    background-color: #eaeaea;
  }

  & .messageFrom {
    width: 350px;
    margin: 25px auto 0;
    padding: 25px;
  }

  & .upload-demo ::v-deep .el-upload-dragger {
    width: 160px;
    height: 60px;
  }
  & .icon-image {
    margin: 0;
    font-size: 30px;
    line-height: 30px;
  }
  & .tuce-text {
    font-size: 12px;
    color: #606266;
  }
  & .el-upload__text {
    height: 30px;
    width: 160px;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
  }
}
::v-deep .el-form-item__content {
  line-height: 25px;
}
</style>